{% extends "h:templates/layouts/base.html.jinja2" %}

{% block page_title %}Authorize application{% endblock %}

{% block content %}
  <div class="form-container form-container--popup content">
    <h1 class="form-header form-header--center">
      Authorize access
      {{ svg_icon('logo', 'form-header__logo') }}
    </h1>
    <p class="text text--auth-prompt">
      <b>{{ client_name }}</b> is requesting access to your Hypothesis account
      <b>{{ username }}</b>.
    </p>

    <form class="form js-authorize-form" method="POST">
      <div class="form-actions">
        <button type="button" class="btn btn--cancel" data-ref="cancelBtn">Cancel</button>
        <div class="u-stretch"></div>
        <div class="form-actions__buttons">
          <button type="submit" class="btn" data-ref="acceptBtn">Allow</button>
        </div>
      </div>

      {# Parameters from the initial request #}
      <input type="hidden" name="response_mode" value="{{ response_mode }}">
      <input type="hidden" name="response_type" value="{{ response_type }}">
      <input type="hidden" name="client_id" value="{{ client_id }}">

      {% if origin %}
      <input type="hidden" name="origin" value="{{ origin }}">
      {% endif %}

      {% if redirect_uri %}
      <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
      {% endif %}

      {% if state %}
      <input type="hidden" name="state" value="{{ state }}" data-ref="stateInput">
      {% endif %}
    </form>
  </div>
{% endblock content %}
